<template>
	<div class="messageModal" v-if="messageModalIsShow">
		<div class="content">
			<div class="title">
				{{$t("消息列表")}}
			</div>
			<div class="close" @click="close">
				<image :src='serverImageUrl("/static/images/chatbot/close.png")' style="width: 100%;" mode="widthFix"></image>
			</div>
			<div style="max-height: 600rpx;overflow: auto">
				<u-empty v-if="!listData||listData.length===0"></u-empty>
				<template v-for="item in listData">
					<!-- 1、货物推广 2、货物竞标 -->
					<div class="item" style="font-size: 12px;" v-if="item.table_type==1||item.table_type==2">
						<div class="pic">
							<image class="img" :src='serverImageUrl("/static/images/chatbot/1.png")' mode="widthFix"></image>
						</div>
						<div class="info">
							<div class="h1"> {{lang=='zh'?item.data.name:item.data.name_ru}}</div>
							<div class="h2"> {{lang=='zh'?item.title:item.title_ru}}</div>
							<div class="flex">
								<div class="flag">
									<image v-if="item.country=='0'" :src='serverImageUrl("/static/images/chatbot/zh.png")' mode="widthFix"
										style="width:37rpx"></image>
									<image v-else :src='serverImageUrl("/static/images/chatbot/ru.png")' mode="widthFix"
										style="width:37rpx">
									</image>
								</div>
								{{item.country=='0'?$t("中国"):$("俄罗斯")}}
							</div>
							<div class="between">
								<div class="price">
									<div v-if="item.data.desire_price">
										{{item.data.desire_price}}
										{{lang=='zh'?item.data.price_unit:item.data.price_unit_ru}}
									</div>
								</div>
								<div class="btn" @click="go(item)">{{$t('查看详情')}}</div>
							</div>
						</div>
					</div>

					<!-- 3、有车求货竞标 4、有货求车竞标 5、小件货源竞标 6、快递公司竞标 -->

					<div class="item" style="font-size: 12px;"
						v-if="item.table_type==3||item.table_type==4||item.table_type==5||item.table_type==6">
						<div class="pic">
							<image class="img" :src='serverImageUrl("/static/images/chatbot/2.png")' mode="widthFix"></image>
						</div>
						<div class="info">
							<div class="h1"> {{lang=='zh'?item.data.departure_city_list.mergename:
							 item.data.departure_city_list.mergename_ru}}
							</div>
							<div class="h2"> {{$t(item.data.mode)}} </div>

							<template>
								<div class="flex" v-if="item.data.departure_city_list">
									<div class="flag">
										<image v-if="item.data.departure_country=='0'"
											:src='serverImageUrl("/static/images/chatbot/zh.png")' mode="widthFix" style="width:37rpx">
										</image>
										<image v-else :src='serverImageUrl("/static/images/chatbot/ru.png")' mode="widthFix"
											style="width:37rpx">
										</image>
									</div>
									{{lang=='zh'?item.data.departure_city_list.city_name:
								 	 item.data.departure_city_list.city_name_ru}}
								</div>
								<div class="flex" v-if="item.data.reach_city_list">
									<div class="flag">
										<image v-if="item.data.reach_country=='0'" :src='serverImageUrl("/static/images/chatbot/zh.png")'
											mode="widthFix" style="width:37rpx">
										</image>
										<image v-else :src='serverImageUrl("/static/images/chatbot/ru.png")' mode="widthFix"
											style="width:37rpx">
										</image>
									</div>
									{{lang=='zh'?item.data.reach_city_list.province_name:
								 	 item.data.reach_city_list.province_name_ru}}
								</div>
							</template>

							<div class="between">
								<div class="price">123234 {{$t(item.data.price_unit)}}</div>
								<div class="btn" @click="go(item)">{{$t('查看详情')}}</div>
							</div>
						</div>
					</div>

					<!-- 7、跨境货代竞标 8、专业代办竞标 -->

					<div class="item" style="font-size: 12px;" v-if="item.table_type==7||item.table_type==8">
						<div class="pic">
							<image class="img" :src='serverImageUrl("/static/images/chatbot/4.png")' mode="widthFix"></image>
						</div>
						<div class="info">
							<div class="h1"> {{lang=='zh'?item.title:item.title_ru}}</div>
							<div class="h2"> {{lang=='zh'?item.data.skill:item.data.skill_ru}}</div>

							<template v-if="item.data.departure_city_list">
								<div class="flex">
									<div class="flag">
										<image v-if="item.data.departure_country=='0'"
											:src='serverImageUrl("/static/images/chatbot/zh.png")' mode="widthFix" style="width:37rpx">
										</image>
										<image v-else :src='serverImageUrl("/static/images/chatbot/ru.png")' mode="widthFix"
											style="width:37rpx">
										</image>
									</div>
									{{lang=='zh'?item.data.departure_city_list.city_name:
									 item.data.departure_city_list.city_name_ru}}
								</div>
								<div class="flex">
									<div class="flag">
										<image v-if="item.data.departure_country=='0'"
											:src='serverImageUrl("/static/images/chatbot/zh.png")' mode="widthFix" style="width:37rpx">
										</image>
										<image v-else :src='serverImageUrl("/static/images/chatbot/ru.png")' mode="widthFix"
											style="width:37rpx">
										</image>
									</div>
									{{lang=='zh'?item.data.departure_city_list.province_name:
									 item.data.departure_city_list.province_name_ru}}
								</div>
							</template>



							<div class="between">
								<div>
									<template v-if="item.table_type==8">
										<image :src='serverImageUrl("/static/images/chatbot/time.png")' mode="widthFix"
											style="width: 20rpx;margin-right: 8rpx"></image>
										{{item.data.speed}}
										{{$t(item.data.speed_unit)}}
									</template>
								</div>
								<div class="btn" @click="go(item)">{{$t('查看详情')}}</div>
							</div>
						</div>
					</div>


				</template>
			</div>


			<div class="confirm" @click="close">
				<div class="text">{{$t("我知道了")}}</div>
				<image :src='serverImageUrl("/static/images/chatbot/submit.png")' mode="widthFix" style="width: 100%;"></image>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		props: ["messageModalIsShow"],
		data() {
			return {
				lang: uni.getStorageSync("lang")
			}
		},
		created() {

		},
		computed: {
			listData() {
				return this.$store.state.workMessage
			}
		},
		methods: {
			async close() {
				for (let item of this.listData) {
					const res = await this.$u.api.basic.getNoticeDetail({
						id: item.id
					})
				}

				this.$emit("update:messageModalIsShow", false);
			},
			go(item) {
				uni.navigateTo({
					url: item.path
				})
			}
		}
	}
</script>

<style lang="scss">
	.confirm {
		width: 388rpx;
		height: 84rpx;
		text-align: center;
		border-radius: 5rpx;
		padding: 16rpx 0;
		position: relative;
		margin: 0 auto;

		.text {
			position: absolute;
			z-index: 9;
			width: 100%;
			height: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
			color: #fff;
			font-size: 32rpx;
			box-sizing: border-box;
			padding-bottom: 40rpx;
		}
	}

	.content {
		position: relative;
	}

	.messageModal {
		position: fixed;
		background: rgba(0, 0, 0, 0.5);
		width: 100%;
		height: 100%;
		z-index: 99;
		display: flex;
		align-items: center;
		justify-content: center;
		top: 0;
		left: 0;

		.item {
			display: flex;
			justify-content: space-between;
			align-items: flex-start;
			border-bottom: 1rpx solid #D8D8D8;
			padding: 15rpx 0;

			.h1 {
				font-size: 24rpx;
				color: #3D3D3D;
				text-overflow: ellipsis;
				overflow: hidden;
				white-space: nowrap;
				font-weight: bold;
			}

			.h2 {
				font-size: 22rpx;
				color: #3D3D3D;
				margin-top: 8rpx;
				margin-bottom: 8rpx;
				text-overflow: ellipsis;
				overflow: hidden;
				white-space: nowrap;
			}

			.pic {
				width: 140rpx;
				height: 150rpx;
				background-color: #f5f5f5;
				border-radius: 10rpx;
				flex-shrink: 0;
				margin-right: 24rpx;
			}

			.info {
				width: 330rpx
			}
		}

		.title {
			text-align: center;
			font-weight: normal;
			margin-bottom: 50rpx;
			font-size: 26rpx;
			color: #3D3D3D;
		}

		.content {
			width: 500rpx;
			// height: 500rpx;
			background-color: #fff;
			color: #333;
			padding: 30rpx;
			border-radius: 20rpx;
		}
	}

	.flex {
		display: flex;
		align-items: center;
	}

	.flag {
		width: 37rpx;
		height: 27rpx;
		background-color: #ddd;
		margin-right: 8rpx;
	}

	.price {
		color: #DE4023;
		font-size: 24rpx;
		font-weight: bold;
	}

	.between {
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 100%;
	}

	.btn {
		min-width: 134rpx;
		padding: 0 8rpx;
		height: 47rpx;
		background-color: #169BD5;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 8rpx;
		color: #fff;
		font-size: 24rpx;
	}

	.close {
		position: absolute;
		top: 25rpx;
		right: 25rpx;
		width: 45rpx;
		z-index: 9;
	}

	.pic {
		display: flex;
		align-items: center;
		justify-content: center;

		.img {
			width: 100%;
			max-height: 100%;
		}
	}
</style>